<template>
  <div>
    <el-card class="box-card" style="margin-top: 20px">
      <template v-slot:header>
        <div class="header">
          <span>我的购物车</span>
          <span v-if="isPaymentReady" class="comment">订单已提交成功，请尽快付款！</span>
        </div>
      </template>
      <div class="content">
        <div v-if="isPaymentReady">
          <span class="sub-title">购买成功！</span>
          <div style="text-align: center">
            <div>{{ message }}</div>
            <!--            <qrcode :value="payment.paymentLink" :options="qrcode_options"></qrcode>-->
<!--            <qrcode-vue :value="value" :size="size" level="H" render-as="svg" />-->
            <qrcode-canvas value="QRCODE.VUE 😄" :size="size" level="H" />
<!--            <qrcode-svg value="QRCODE.VUE 😄" level="H" />-->
            <div>
              支付总额：<span class="price">{{ payment.totalPrice.toFixed(2) }}</span>
            </div>
            <div>
              提示：本程序为演示，扫描以上二维码并不会实际触发支付<br />
              <el-link type="primary" @click="accomplishPayment">点击模拟扫描</el-link>
              或也可以
              <el-link type="danger" @click="cancelPayment">点击取消购买</el-link>
            </div>
          </div>
        </div>
        <div v-else>
          <span class="sub-title">购买失败！</span>
          <span>失败原因：{{ payment.message || '没有收到服务端的支付结算数据' }}</span>
        </div>
      </div>
    </el-card>
    <PayStepIndicator :step="3" />
  </div>
</template>

<script setup>
import PayStepIndicator from '@/components/home/cart/PayStepIndicator.vue'
import api from '@/api'
import QrcodeVue, { QrcodeCanvas, QrcodeSvg } from 'qrcode.vue'
import { computed, onMounted, ref } from 'vue'
import { useCartStore } from '@/stores/cart.js'
import { ElNotification } from 'element-plus'

const value = ref('https://example.com')
const size = ref(300)
const cartStore = useCartStore()

const payment = cartStore.state.payment;

const countdown = ref({
  min: 0,
  sec: 0,
  timeout: false,
})
const isPaymentFinish = ref(false)
// const qrcode_options = ref({
//   width: 300,
//   color: { dark: '#666' },
// })

/**
 * 是否成功生成支付单
 **/
const isPaymentReady = computed(() => {
  return !!cartStore.state.payment.payId
})
const message = computed(() => {
  if (isPaymentFinish.value) {
    return '恭喜，你已经成功付款！'
  } else {
    if (!countdown.value.timeout) {
      return `商品已准备完成，请在 ${countdown.value.min} 分钟${countdown.value.sec}秒内完成支付，订单号码：${cartStore.state.payment.payId}`
    } else {
      return '你的订单已经取消，如仍需要，请重新购买商品。'
    }
  }
})

onMounted(() => {
  countDown()
})

/**
 * 商品支付超期的倒计时
 */
function countDown() {
  const msec = cartStore.state.payment.expires - new Date().getTime()
  if (msec > 0) {
    countdown.value.min = parseInt((msec / 1000 / 60) % 60)
    countdown.value.sec = parseInt((msec / 1000) % 60)
    setTimeout(() => {
      countDown()
    }, 1000)
  } else {
    countdown.value.timeout = true
  }
}
/**
 * 取消商品支付
 */
async function cancelPayment() {
  try {
    await api.payment.cancelPayment(cartStore.state.payment.payId)
    countdown.value.timeout = true
    ElNotification({ title: '操作成功', message: '订单已被取消', type: 'info' })
  } catch (e) {
    ElNotification({ title: '操作失败', message: e.message, type: 'error' })
  }
}
/**
 * 完成商品支付
 */
async function accomplishPayment() {
  try {
    await api.payment.accomplishPayment(cartStore.state.payment.payId)
    isPaymentFinish.value = true
    ElNotification({ title: '操作成功', message: '订单已完成支付', type: 'success' })
  } catch (e) {
    ElNotification({ title: '操作失败', message: e.message, type: 'error' })
  }
}
</script>

<style scoped>
.price {
  color: red;
  font-size: 18px;
  font-weight: bold;
  line-height: 32px;
}
</style>
